<template>
  <view class="pb-safe-area">
    <view class="p-4 flex flex-column grid-gap-4">
      <button class="w-100 flex rounded-4 p-4 flex-center bg-bg-grey border-0 btn-contact" hover-class="bg-placeholder"
        open-type="contact">
        <image src="@/static/icon-10.png" class="block-icon-1" mode="aspectFit" />
        <view class="h10 font-weight-600  flex-1 text-left text-white">在线客服</view>
        <uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
      </button>
      <view class="bg-bg-grey rounded-4 p-4">
        <mp-html :content="content" selectable class="text-wrap content"></mp-html>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { $page, $http } from '@/utils';
const content = ref('');
onLoad((options: any) => {
  let url = 'Article/getContent';
  if (options.alias) {
    url = 'Article/getContentByAlias';
  }
  $http.get(url, {
    data: {
      id: options.id,
      alias: options.alias
    }
  }).then((res: any) => {
    if (res.code === $http.ResponseCode.SUCCESS) {
      $page.title(res.data.title);
      content.value = res.data.content;
    }
  })
})
</script>

<style lang="scss">
.content {
  color: #FFFFFF;
}

.content ._img {
  max-width: 100%;
}

.block-icon-1 {
  width: 25px;
  height: 25px;
  border-radius: 14px;
  margin-right: 12px;
}

.btn-contact {
  line-height: auto;
}

.btn-contact uni-icons {
  height: 16px;
  line-height: 16px;
}

.btn-contact::after {
  display: none;
}
</style>
